<template>
  <view class="cinema-card-horizontal" :class="{ own: data.cinemaCode == '35010731' }" @click="onClick">
    <image v-if="data.cinemaCode == '35010731'" class="bg-card" :src="useImage('/zuimei-film-oss/1.0.0/icons/logo-card.png')" mode="scaleToFill" />
    <view v-if="data.collectionType == 1" class="collect-tag">
      <zm-icon name="star-circle" color="#FFB847" size="18rpx"></zm-icon>
    </view>
    <view class="flex items-center justify-between mb-8 z-10">
      <view class="flex flex-1">
        <zm-text-highlight ref="nameText" font-size="32rpx" font-weight="bold" :text="data.cinemaName" :match="keyword" text-row="1"></zm-text-highlight>
      </view>
      <view class="flex items-end text-line-1 ml-10">
        <text class="text-price text-price-before theme-color mr-4 font-32 font-bold">{{ data.lowTicket | formatDigit }}</text>
        <text class="text-999 font-22">起</text>
      </view>
    </view>
    <view class="flex items-center justify-between text-666 z-10">
      <text class="text-row-1 mr-10">{{ data.address }}</text>
      <text v-if="data.distance >= 0" class="shrink-0">{{ data.distance | formatDistance }}</text>
    </view>
    <view v-if="data.tTagStyle && data.tTagStyle.length" class="flex flex-wrap items-center mt-20">
      <view v-if="data.couponActValue > 0" class="reduce-badge">
        <text class="prefix-tag">特惠</text>
        <text class="reduce-text">最高减{{ data.couponActValue | formatDigit }}元</text>
      </view>
      <view v-for="(tag, tagIndex) in data.tTagStyle" :key="tagIndex" class="tag-badge" :style="{ color: useColor(tag.color) }">{{ tag.cinemaTag }}</view>
    </view>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
export default {
  name: "cinema-card-horizontal",
  mixins: [hook, weixin],
  props: {
    // 数据
    data: { type: Object, default: () => ({}) },
    // 关键字，名称会高亮
    keyword: { type: String, default: "" }
  },
  data() {
    return {}
  },
  computed: {
    couponPrice() {
      return Math.max(this.data.lowTicket - this.data.couponActValue, 0).toFixed(2)
    }
  },
  created() {},
  mounted() {},
  methods: {
    onClick() {
      this.$emit("click", this.data)
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-card-horizontal {
  display: flex;
  overflow: hidden;
  position: relative;
  padding: 30rpx 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  flex-direction: column;
  z-index: 1;
  &.own {
    background: linear-gradient(#fff5df 0%, #ffffff 50%, #ffffff 100%);
  }
  .price-bg {
    height: 44rpx;
    padding: 0 24rpx;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(254, 59, 59, 0.1) 100%);
    border-radius: 0rpx 10rpx 8rpx 0rpx;
  }
  .bg-card {
    top: 0;
    right: 0;
    width: 394rpx;
    height: 100%;
    position: absolute;
  }
  .collect-tag {
    top: 0;
    right: 0;
    width: 100rpx;
    height: 100rpx;
    display: flex;
    position: absolute;
    padding-top: 6rpx;
    padding-right: 6rpx;
    align-items: flex-start;
    justify-content: flex-end;
    background: conic-gradient(from 90deg at 50% 0, #ffe9c2 0, #ffe9c2 45deg, transparent 45deg);
  }
  .reduce-badge {
    height: 30rpx;
    display: flex;
    font-size: 20rpx;
    margin-top: 4rpx;
    margin-bottom: 4rpx;
    margin-right: 8rpx;
    align-items: center;
    border-radius: 6rpx;
    border: 1px solid #fe4f3b;
    justify-content: space-between;
    .prefix-tag {
      height: 100%;
      color: #fff;
      padding: 0 6rpx;
      display: flex;
      position: relative;
      align-items: center;
      font-weight: bold;
      margin-left: -1rpx;
      background-color: #fe4f3b;
      border-top-left-radius: 6rpx;
      border-bottom-left-radius: 6rpx;
    }
    .reduce-text {
      height: 100%;
      color: #fe4f3b;
      padding: 0 6rpx;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-left: 0;
      font-weight: bold;
      border-top-right-radius: 6rpx;
      border-bottom-right-radius: 6rpx;
    }
  }
  .tag-badge {
    height: 30rpx;
    font-size: 20rpx;
    padding: 0 6rpx;
    border-radius: 6rpx;
    display: flex;
    margin-top: 4rpx;
    margin-bottom: 4rpx;
    margin-right: 8rpx;
    color: var(--theme-color);
    align-items: center;
    border: 1rpx solid currentColor;
    background-color: #fff;
  }
}
</style>
